<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
    <table id="demo" lay-filter="test" ></table>

<!--工具条-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../layui/layui.js"></script>
<script src="../js/ajax.js"></script>
<script>
layui.use('table', function(){
    var table = layui.table
        ,form = layui.form;

    //表格初始化
    table.render({
        elem: '#demo'

        ,url: './public/select_limit.php?table=sys_user' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
        {field: 'sid', title: 'ID', width:80, sort: true, fixed: 'left'}
        ,{field: 'suer', title: 'suer', width:80}
        ,{field: 'sphone', title: '手机', width:180, sort: true}
        ,{field: 'semail', title: '邮箱', width:180, } 
        ,{field: 'login_name', title: '登录名', width: 180}
        ,{field: 'last_login_time', title: '最后登录时间', width: 180, sort: true}
       
        ,{field: '', title: '操作', width: 135, sort: true, toolbar: '#barDemo'}
        ]]
        ,done: function(res, curr, count){ 
        //console.log(res);   // 后台返回来的数据
        //console.log(curr);
        //console.log(count);
        }
    });
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

        if(layEvent === 'del'){ //删除
            layer.confirm('确定删除吗', function(index){
            // 开启加载动画
            var index2 = layer.load(2, {time: 10*1000});
            
            layer.close(index);
            //向服务端发送删除指令
            ajax({   
                url: './public/del_one.php',
                data: {
                    table: 'sys_user',
                    id_name: 'sid',
                    id: data.sid
                },
                method: 'post',
                success: function(res){
                    // 关闭加载动画
                    layer.close(index2);     
                    if(res == 1){
                        layer.msg('删除成功'); 
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    }else{
                        layer.msg('删除失败, 请联系相关人员'); 
                    }
                    }
                });
            });
            // ajax({   
            //     url: './public/del_one.php',
            //     data: {
            //         table: 'sys_user',
            //         id_name: 'sid',
            //         id: data.sid
            //     },
            //     method: 'post',
            //     success: function(res){
            //         // 关闭加载动画
            //         layer.close(index2);     
            //         if(res == 1){
            //             layer.msg('删除成功'); 
            //             obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            //         }else{
            //             layer.msg('删除失败, 请联系相关人员'); 
            //         }
            //         }
            //     });
            // });
        }else if(layEvent === 'edit'){ //编辑
        
            //do something
            layer.open({
                type: 2,
                title: "修改商品",
                area: ['520px', '430px'],
                content: './widget/sys_user-m.html', //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                success: function(layero, index){
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    //console.log(body.html()) //得到iframe页的body内容
                    
                    //为子页面表单赋值
                    body.find('input[name="suer"]').val(data.suer);
                    body.find('input[name="sphone"]').val(data.sphone);
                    body.find('input[name="semail"]').val(data.semail);
                    body.find('input[name="login_name"]').val(data.login_name);
                    
                    // 向子iframe传值
                    iframeWin.child(data, function(res, data){
                        if(res == 1){
                            layer.msg('更新成功'); 
                            //同步更新缓存对应的值
                            obj.update({
                                suer: data.suer,
                                sphone: data.sphone,
                                semail: data.semail,
                                login_name: data.login_name
                            });
                        }else{
                            layer.msg('更新失败, 请联系相关人员!'); 
                          
                        }
                    });
                }
            }); 
        }
    })
});
</script>
</body>
</html>